<template>
  <view class="hor-layout-center" style="padding-right: 20px">
    <span>时间轴：</span>
    <el-slider
        style="flex: 1;padding-right: 20px"
        v-model="currentTime"
        show-stops
        :step="1"
        :max="maxTime"
        :marks="markMap"
        label="选择时间"
        @change="changeValue"
        :format-tooltip="formatTooltip">
    </el-slider>
  </view>
</template>

<script>
  import {getDateTime} from "@/common/util.js"

  export default {
    name: "time-slider",
    props: {
      startTime: {type: String, default: '2021-09-08 18:52:37'},
      endTime: {type: String, default: '2021-09-10 18:52:37'},
      currentTime: {type: Number, default: 0}
    },
    data() {
      return {}
    },
    computed: {
      maxTime() {
        return this.getTimeSpan(this.startTime, this.endTime)
      },
      markMap() {
        let span = Math.floor(this.maxTime / 10)
        let mark = {}
        for (let i = 0; i <= 10; i++) {
          let key = i * span
          let value = this.getTimeBySpan(this.startTime, i * span)
          if (i !== 10) mark[key] = value
          else mark[key] = {style: {'white-space': 'nowrap'}, label: value}
        }
        return mark
      }
    },
    mounted() {

    },
    methods: {
      getTimeBySpan(start, span) {
        let dateStart = new Date(start.replace(/-/g, "/")).getTime()
        let dateValue = dateStart + span * 60 * 1000
        return getDateTime(new Date(dateValue))
      },
      getTimeSpan(start, end) {
        let dateStart = new Date(start.replace(/-/g, "/"));
        let dateEnd = new Date(end.replace(/-/g, "/"));
        let dateDiff = dateEnd.getTime() - dateStart.getTime();//时间差的毫秒数
        let minuteDiff = dateDiff / 1000 / 60
        return minuteDiff
      },
      formatTooltip(val) {
        return this.getTimeBySpan(this.startTime, val)
      },
      changeValue(val) {
        this.$emit("changeValue", val);
      }
    }
  }
</script>

<style scoped>

</style>
